import { useState, useEffect } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Link } from 'react-router-dom';
import Home from './Home';
import Topic from './Topic';
import './App.css';
import Collect from './Collect';

const App = () => {
  const style = {
    height: 160,
    background: '#ccc',
    textAlign: 'center',
    lineHeight: '80px'
  }
  return (
    <BrowserRouter>
      <header style={style}>
        header导航栏
        <br/>
        <Link to={'/collect'} >收藏列表</Link>
      </header>

      <Route exact path='/'>
        <Home />
      </Route>
      {/* 双标签包着Topic，在Topic里面获取不到props，下面的可以获取到props及里面四个属性*/}
      {/* <Route path='/topic/:id' component={Topic}/> */}
      <Route path='/topic/:id'>
        <Topic />
      </Route>
      <Route path='/collect'>
        <h2>收藏列表</h2>
        <Collect />
      </Route>
    </BrowserRouter>
  );
}


// 函数组件
// const App = () => {

//   // 声明函数，实现点击按钮+1
//   const [num, setNum] = useState(0);
//   const [num2, setNum2] = useState(0);

//   const addNum = () => setNum(num + 1);

//   useEffect(()=>{
//     let timer = setInterval(()=>{
//       // 拿不到最新值的时候，用箭头函数，里面的参数就是最新值
//       setNum2((a)=>a+1);
//     },2000)
//     // 组件卸载的时候会执行return里面的内容，也就是清除定时器
//     return ()=>{
//       clearInterval(timer)
//     }
//   },[])
//   // 只执行一次[],依赖count【count】

//   // return后面肯定是一个值，所以只能一个标签，可以是一个对象<div></div>，根元素只能是一个标签
//   return (
//     <div className="App">
//       <Home/>
//       <h2>count1:{num}</h2>
//       {/* count1是手动控制的，点击+1才会加1 */}
//       <button onClick={addNum}>+1</button>
//       <button onClick={() => { setNum(num + 1) }}>+1</button>
//       {/* count2是自动控制的，每隔两秒钟就会加1 */}
//       <h2>count2:{num2}</h2>
//     </div>
//   );
// }


export default App;